// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

.c-browser {
    border-radius: $border-radius-md;
}

.c-browser-bar {
    --heading-size: var(--body-sm-size);
    background: $browser-background $browser-cool-gradient;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    border-top: $border-black;
    border-left: $border-black;
    border-right: $border-black;
    border-top-left-radius: $border-radius-md;
    border-top-right-radius: $border-radius-md;
    padding: $spacing-sm $spacing-md;
    position: relative;
    min-height: 1rem; // IE fallback
    min-height: var(--heading-size); // reserve space for bars without text

    @media #{$mq-md} {
        --heading-size: var(--title-3xs-size);
    }
}

.c-browser-bar-dot-container {
    position: absolute;
    left: $spacing-md;
}

// match $border-black styles
.c-browser-bar-dot {
    stroke: $page-background;
    stroke-width: $border-width;
}

.c-browser-bar-title {
    grid-area: full-width;
    color: $browser-background;
    font-family: 'Fira Mono', 'Andale Mono', monospace;
    font-size: 1rem; // IE fallback
    font-size: var(--heading-size);
    font-weight: 500;
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
}

.c-browser-content {
    background-color: $browser-background;
    border: $border-black;
    border-bottom-left-radius: $border-radius-md;
    border-bottom-right-radius: $border-radius-md;
    padding: 40px $layout-sm;

    h4 {
        margin-bottom: $layout-sm;
    }

    > *:last-child {
        margin-bottom: 0;
    }
}
